<template>

  <div class="promotion">
    <mt-header fixed title="联系客服">
      <router-link to="/my" slot="left"><mt-button icon="back"></mt-button></router-link>
    </mt-header>
    <div class="cont">
      <div class="tips-text">
        请扫码或复制添加微信客服
      </div>
      <div class="copy">
        <div class="copy-cont">
         微信客服一：Ting229900
        </div>
        <div class="copy-btn" @click="onCopy">
          复制
        </div>
      </div>
      <div class="code">
        <img src="@/assets/010.png" alt="" />
      </div>

    </div>

  </div>
</template>

<script>
  export default {

    name: 'promotion',
    data() {
      return {
        content: "Ting229900",
      };
    },

    created: function() {},
    watch: {

    },
    mounted() {

    },
    methods: {
      onCopy() {
        const textArea = document.createElement("textarea");
        textArea.value = this.content;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        return new Promise((resolve, reject) => {
          document.execCommand("copy") ? resolve() : reject(new Error("出错了"));
          textArea.remove();
        }).then(
          () => {
            this.$layer.msg(this.$t("复制成功"));
          },
          () => {
            this.$layer.msg(this.$t("复制失败"));
          }
        );
      },
      jump() {
        this.$router.push({
          path: "promotionRecord"
        })
      }
    }

  };
</script>

<style scoped>
  .copy {
    padding-top: .82rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .copy-cont {
    color: #333;
    font-size: 31px;
    font-weight: 600;
    padding-right: .24rem;
  }

  .copy-btn {
    color: #f19043;
    font-size:31px;
    font-weight: 600;
  }

  .promotion {
    width: 100%;
    min-height: 100vh;
    background-color: #F7F7F7;
  }

  .mint-header {
    background-color: #fff;
    color: #000;
    border-bottom: 1px solid #F1F1F1;
  }

  .tab-text {
    color: #1A9194;
    font-size:26px;
  }

  .cont {
    padding: 2rem auto;

  }

  .tips-text {
    display: flex;
    justify-content: center;
    color: #d52612;
    font-size:31px;
    padding-top: 2rem;
  }

  .code {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: .86rem;
  }

  .code img {
    width:619px;
    height: 617px;
  }
</style>
